<template>
    <v-card>
        <v-card-title>
            <v-text-field
                    v-model="search"
                    prepend-icon="search"
                    label="搜索歌单"
                    single-line
                    hide-details
            ></v-text-field>
            <v-spacer></v-spacer>
            <v-flex xs2>
                <v-btn round color="primary" dark @click="addSongList">
                    新增歌单
                </v-btn>
            </v-flex>
        </v-card-title>
        <v-data-table
                :headers="headers"
                :items="songList"
                :search="search"
                :pagination.sync="pagination"
                :total-items="totalSongList"
                :loading="loading"
                class="elevation-1"
        >
            <template v-slot:items="props">
                <td class="text-xs-right" style="height: 70px">
                    <div class="img">
                        <v-img
                                width="80px"
                                :src="props.item.picture"
                                aspect-ratio="1"
                                class="grey lighten-2"
                        >
                            <template v-slot:placeholder>
                                <v-layout
                                        fill-height
                                        align-center
                                        justify-center
                                        ma-0
                                >
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                </v-layout>
                            </template>
                        </v-img>
                    </div>
                </td>
                <td class="text-xs-center ">
                    <span class="tb_hidden" :title="props.item.title">
                    {{ props.item.title }}
                    </span>
                </td>
                <td class="text-xs-center">
                     <span class="tb_hidden" :title="props.item.introduce">
                    {{ props.item.introduce }}
                     </span>
                </td>
                <td class="text-xs-center">{{ props.item.count }}</td>
                <td class="text-xs-center">
                    <label class="tb_label" @click.prevent="showdetail(props.item.id)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情</label>
                </td>
                <td class="text-xs-center">
                <v-tooltip left>
                    <v-btn slot="activator" icon @click="editSongList(props.item)">
                        <i class="el-icon-edit"/>
                    </v-btn>
                    <span> 修改歌单</span>
                </v-tooltip>
                <v-tooltip left>
                    <v-btn icon slot="activator" @click="delSongList( props.item.id)">
                        <i class="el-icon-delete"/>
                    </v-btn>
                    <span> 删除歌单</span>
                </v-tooltip>
                </td>
            </template>
            <template v-slot:no-results>
                <v-alert :value="true" color="error" icon="warning">
                    Your search for "{{ search }}" found no results.
                </v-alert>
            </template>
        </v-data-table>
        <!--弹出的对话框-->
        <v-dialog max-width="500" v-model="show" persistent scrollable>
            <v-card>
                <!--对话框的标题-->
                <v-toolbar dense dark color="primary">
                    <v-toolbar-title>{{isEdit ? '修改' : '新增'}}歌单</v-toolbar-title>
                    <v-spacer/>
                    <!--关闭窗口的按钮-->
                    <v-btn icon @click="closeWindow">
                        <v-icon>close</v-icon>
                    </v-btn>
                </v-toolbar>
                <!--对话框的内容，表单-->
                <v-card-text class="px-3" style="height: 600px">
                    <songList-form
                            @close="closeWindow"
                            :is-edit="isEdit"
                            :oldSongList="oldSongList"
                            ref="SongListForm"/>
                </v-card-text>
                <!--底部按钮，用来操作步骤线-->
            </v-card>
        </v-dialog>
    </v-card>
</template>

<script>
import SongListForm from './SongListForm'
export default {

data () {
    return {
        search: '',
        pagination: {
            descending: false,
            page: 1,
            rowsPerPage: 5, // -1 for All",
            sortBy: "",
            totalItems: []
        }, // 分页信息
        isEdit: false,  //是否是修改
        headers: [
         { text: '图片', sortable: false, value: 'picture' ,align: 'center'},
         { text: '歌单名称', value: 'title',align: 'center',width: 160 },
         { text: '介绍', value: 'introduce' ,align: 'center',width: 160},
         { text: '播放次数', value: 'count' ,align: 'center'},
         { text: '内容', value: 'id' ,align: 'center'},
         { text: '操作' ,align: 'center'}],
        songList: [],
        totalSongList: 0,
        show: false,
        loading: true,
        oldSongList: {}
    }
},
methods: {
    getDataFromServer(){
        this.$http.get("/songlist/page",{
            params: {
            key: this.search,
            page: this.pagination.page,
            rows: this.pagination.rowsPerPage,
            sortBy: this.pagination.sortBy? this.pagination.sortBy :"",
            desc: this.pagination.descending? this.pagination.descending:"true"}
        }).then(resp =>  {
            console.log(resp.data)
            this.songList = resp.data.items;
            this.totalSongList = resp.data.total;
            this.loading = false;
        }).catch(()=>{
            this.songList = [];
            this.totalSongList = 0;
            this.loading = false;
        })
    },
    showdetail(id) {
        this.$router.push("/song/AllSongs?id="+id);
    },
    closeWindow() {
        // 重新加载数据
        this.getDataFromServer();
        // 关闭窗口
        this.show = false;
    },
    addSongList() {
        this.isEdit = false
        this.show = true
        this.oldSongList = {
            picture: ''
        }
    },
    editSongList(oldSongList) {
        this.$http.get("category/songList/of/findByLid?id="+oldSongList.id).then(resp=>{
            oldSongList.categories = resp.data
            this.isEdit = true
            this.show = true
            console.log(oldSongList)
            this.oldSongList = oldSongList
        })
    },
    //删除
    delSongList(id) {
        this.$message.confirm("你确定删除该歌单嘛").then(()=>{
            this.$http.get("/songlist/deleteSongList?id="+id)
                .then(()=>{
                    this.$message.success("删除成功")
                    this.getDataFromServer();
                })
                .catch(()=>{
                    this.$message.error("删除失败")
                })
        })
    }
},
watch: {
    pagination: {
        deep: true,
        handler() {
            this.getDataFromServer();
        }
    }
},
    mounted() {
        this.getDataFromServer();
    },
components: {
    SongListForm
}
}
</script>
<style scoped>
    .img {
        height: 100px;
        margin: auto;
        padding-top: 10px;
        padding-left: 40px;
    }
    .tb_hidden{
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        width:160px;
        overflow:hidden;
    }
    .tb_label{
        cursor: pointer;
        color: #20a0ff;
    }
</style>